//2018-1-27 重新编写
/*node-sass -w public.scss publisc.css --output-style expanded*/
html,body{
  font-family:'苹方','Helvetica Neue',Helvetica,sans-serif;
}
@function torem($px){//$px为需要转换的字号
  @return $px / 75px * 1rem; //100px为根字体大小
}
*{
  padding:0;
  margin:0;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
ul,ol,li{
  list-style: none;
  list-style-type: none;
}
a{
  text-decoration: none;
  outline: none;
}
b,strong{
  font-weight: normal;
}
i,em{
  font-style: normal;
}
h1,h2,h3,h4,h5{
  font-weight: normal;
}
table{
  width: 100%;
  border-collapse: collapse;
}
pre{
  white-space: pre-wrap;
  word-wrap: break-word;
}
a,img,button,input,textarea,div,ul,ol,li{
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
input,textarea,select{
  -webkit-appearance: none;
  background: none;
}
%ce{
  position: absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  margin:auto;
}
%lr{
  position: absolute;
  left: 0;
  right:0;
  margin:auto;
}
%tb{
  position: absolute;
  top:0;
  bottom:0;
  margin: auto;
}
@mixin  cube($size:100px){
  width: $size;
  height: $size;
}
@mixin circle($size:100px){
  @include cube($size);
  border-radius: 50%;
}
@mixin rect($width:100px,$height:100px){
  width: $width;
  height: $height;
}
@function  randomColor(){
  $red:random(255);
  $green:random(255);
  $blue:random(255);
  @if($red>50){
    $red:20;
  }
  @if($green>50){
    $green:20;
  }
  @if($blue<50){
    $blue:20;
  }
  @return rgba($red,$green,$blue,0.4)
}
@mixin bg(){
  background: randomColor();
}
//单行文本溢出
%ellipsis{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
//多行文本溢出
@mixin ellipsis_clip($line:2){
  display: -webkit-box;
  overflow: hidden;
  white-space: normal !important;
  -ms-text-overflow: ellipsis;
  text-overflow: ellipsis;
  word-wrap: break-word;
  -webkit-line-clamp:$line;
  -webkit-box-orient:vertical;
}
%clearfix:after {
  content: "";
  display: block;
  height: 0;
  clear: both;
}

//列表右侧箭头
.navigate_right::after {
  display: inline-block;
  position: absolute;
  top: 50%;
  right: 0.20rem;
  margin-top: -0.14rem;
  font-family: "ygfont";
  font-size: 0.28rem;
  line-height: 1;
  text-decoration: none;
  content: "\e61f";
  color: #aaaaaa;
}
//box-sizing
@mixin box_sizing($boxmodel:border-box){
  -webkit-box-sizing: $boxmodel;
  -moz-box-sizing: $boxmodel;
  -ms-box-sizing: $boxmodel;
  -o-box-sizing: $boxmodel;
  box-sizing: $boxmodel;
}
//圆角
@mixin border_radius($radius:4px){
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}
//渐变
@mixin gradient($c1,$c2){
  background: -moz-linear-gradient(top, $c1 0%, $c2 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$c1), color-stop(100%,$c2));
  background: -webkit-linear-gradient(top, $c1 0%,$c2 100%);
  background: -o-linear-gradient(top, $c1 0%,$c2 100%);
  background: -ms-linear-gradient(top, $c1 0%,$c2 100%);
  background: linear-gradient(to bottom, $c1 0%,$c2 100%);
}
//阴影
@mixin  box_shadow($shadow:0 -2px 6px rgba(0,0,0,0.1)){
  -webkit-box-shadow: $shadow;
  box-shadow: $shadow;
}
//Animations
@mixin animation($animation){
  -webkit-animation: $animation;
  -o-animation: $animation;
  animation: $animation;
}
@mixin animation_name($name){
  -webkit-animation-name: $name;
  -moz-animation-name: $name;
  -o-animation-name: $name;
  animation-name: $name;
}
@mixin animation_duration($duration:.5s){
  -webkit-animation-duration: $duration;
  animation-duration: $duration;
}
@mixin animation_timing_function($timing-function:linear){
  -webkit-animation-timing-function: $timing-function;
  animation-timing-function: $timing-function;
}
@mixin animation_delay($delay){
  -webkit-animation-delay: $delay;
  animation-delay: $delay;
}
@mixin animation-iteration-count($iteration-count:infinite) {
  -webkit-animation-iteration-count: $iteration-count;
  animation-iteration-count: $iteration-count;
}
@mixin nanimation-direction($direction) {
  -webkit-animation-direction:$direction;
  animation-direction: $direction;
}
@mixin animation-fill-mode($fill-mode:both) {
  -webkit-animation-fill-mode: $fill-mode;
  animation-fill-mode: $fill-mode;
}
// Transformations
@mixin scale($ratio) {
  -webkit-transform: scale($ratio);
  -ms-transform: scale($ratio); // IE9 only
  -o-transform: scale($ratio);
  transform: scale($ratio);
}
@mixin scale($ratioX,$ratioY) {
  -webkit-transform: scale($ratioX, $ratioY);
  -ms-transform: scale($ratioX, $ratioY); // IE9 only
  -o-transform: scale($ratioX, $ratioY);
  transform: scale($ratioX, $ratioY);
}
@mixin scaleX($ratio) {
  -webkit-transform: scaleX($ratio);
  -ms-transform: scaleX($ratio); // IE9 only
  -o-transform: scaleX($ratio);
  transform: scaleX($ratio);
}
@mixin scaleY($ratio) {
  -webkit-transform: scaleY($ratio);
  -ms-transform: scaleY($ratio); // IE9 only
  -o-transform: scaleY($ratio);
  transform: scaleY($ratio);
}
@mixin skew($x,$y) {
  -webkit-transform: skewX($x) skewY($y);
  -ms-transform: skewX($x) skewY($y); // IE9+
  -o-transform: skewX($x) skewY($y);
  transform: skewX($x) skewY($y);
}
@mixin translate($x,$y) {
  -webkit-transform: translate($x, $y);
  -ms-transform: translate($x, $y); // IE9 only
  -o-transform: translate($x, $y);
  transform: translate($x, $y);
}
@mixin translate3d($x,$y,$z) {
  -webkit-transform: translate3d($x, $y, $z);
  transform: translate3d($x, $y, $z);
}
@mixin rotate($degrees) {
  -webkit-transform: rotate($degrees);
  -ms-transform: rotate($degrees); // IE9 only
  -o-transform: rotate($degrees);
  transform: rotate($degrees);
}
@mixin rotateX($degrees) {
  -webkit-transform: rotateX($degrees);
  -ms-transform: rotateX($degrees); // IE9 only
  -o-transform: rotateX($degrees);
  transform: rotateX($degrees);
}
@mixin rotateY($degrees) {
  -webkit-transform: rotateY($degrees);
  -ms-transform: rotateY($degrees); // IE9 only
  -o-transform: rotateY($degrees);
  transform: rotateY($degrees);
}
@mixin perspective($perspective) {
  -webkit-perspective: $perspective;
  -moz-perspective: $perspective;
  perspective: $perspective;
}
@mixin perspective-origin($perspective) {
  -webkit-perspective-origin: $perspective;
  -moz-perspective-origin: $perspective;
  perspective-origin: $perspective;
}
@mixin transform-origin($origin) {
  -webkit-transform-origin: $origin;
  -moz-transform-origin: $origin;
  -ms-transform-origin: $origin; // IE9 only
  transform-origin: $origin;
}
// Transitions
@mixin transition($transition) {
  -webkit-transition: $transition;
  -o-transition: $transition;
  transition: $transition;
}
@mixin transition-property($transition-property) {
  -webkit-transition-property: $transition-property;
  transition-property: $transition-property;
}
@mixin transition-delay($transition-delay) {
  -webkit-transition-delay: $transition-delay;
  transition-delay: $transition-delay;
}
@mixin transition-duration($transition-duration) {
  -webkit-transition-duration: $transition-duration;
  transition-duration: $transition-duration;
}
@mixin transition-timing-function($timing-function) {
  -webkit-transition-timing-function: $timing-function;
  transition-timing-function: $timing-function;
}
@mixin transition-transform($transition) {
  -webkit-transition: -webkit-transform $transition;
  -moz-transition: -moz-transform $transition;
  -o-transition: -o-transform $transition;
  transition: transform $transition;
}
//12栅格
$cols:12;
$name:cols;
@for $i from 1 through $cols{
  .#{$name}-#{$i}{
    width: percentage($i/$cols);
  }
}
//body{
//  @include bg();
//}
